<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../vue.js"></script>
    
    <!--
https://www.cnblogs.com/rapale/p/14060141.html
这个人的比较全
        
    -->



<div id="app">
<cpn>
    <!--slotProps随便取的 -->
    <template #header="slotProps">
        <h1>我石头</h1>
        <h1>{{slotProps}}</h1>
        <h1>{{slotProps.data21}}</h1>
      </template>
    
   <template>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
   </template>
    
      <template v-slot:footer>
        <p>我视角</p>
      </template>
</cpn>

</div>

<template id="cpn">
<div>
    <!--任意定义一个属性名绑定 组件中的数据，后面可以通过这个属性来索引message对应的值-->
    <slot name="header" :data21="message">头</slot>
    <slot></slot>
   <slot name="footer">角</slot>
</div>
</template>


<script>
    const app = new new Vue({
        el:"#app",
        components: {
            cpn:{
                template:'#cpn',
                data () {
                    return {
                        message:"aa"
                    }
                }
            }
        }
    })
</script>
</body>
</html>